<template>
	<view class="login">
		<Navigation />
		<view class="f fd-c ai-c mt-151">
			<view class="logo w-160 h-160 f jc-c ai-c">
				<image src="../../static/login/logo.png" class="w-130 h-130"></image>
			</view>
			<view class="fs-60 mt-40 fw-800 text-color1">手机快捷登录</view>
			<view class="mt-16 fs-24 text-color3">未注册过的手机号将自动创建账号</view>
			<view class="w-654">
				<view class="w-654 h-96 tel f ai-c mt-64 ph-24">
					<view>+86</view>
					<u-input v-model="tel" type="number" :border="false" placeholder="请输入手机号" clearable
						@change="isBtn" />
				</view>
				<view class="mt-32 f ai-c">
					<view class="f ai-c">
						<u-checkbox-group @change="getAgree">
							<u-checkbox v-model="isAgree" shape="circle" size="15" activeColor="#FABB3C"></u-checkbox>
						</u-checkbox-group>
						<view class="fs-22 text-color3 f">登录即表示同意<view class="text-color">《用户协议》</view>和<view
								class="text-color">《隐私协议》</view>
						</view>
					</view>

				</view>
			</view>

			<view class="w-654 h-96 mt-64">
				<u-button text="发送验证码" color="#FABB3C" shape="circle" :disabled="disabled" @click="toCode"></u-button>
			</view>
			<view class="fs-26 text-color mt-40" @click="toAccountLogin">账号密码登录</view>
			<!-- <view class="f ai-c mt-130">
        <view class="heng w-120 h-1"></view>
        <view class="fs-26 mh-10 text-color3">使用其他方式</view>
        <view class="heng w-120 h-1"></view>
      </view>
      <view class="f mt-48">
        <image src="../../static/login/wx.png" class="w-52 h-52 mr-48"></image>
        <image src="../../static/login/zfb.png" class="w-52 h-52"></image>
      </view> -->
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { sendSmsCode } from '@/services/api/auth';
	import { validatePhoneNumber } from '@/utils/global';
	const isAgree = ref(false);
	const tel = ref('');
	const disabled = ref(true);
	//发送验证码
	const toCode = async () => {
		if (!disabled.value) {
			if (!validatePhoneNumber(tel.value)) {
				uni.showToast({
					title: '请输入正确手机号',
					icon: 'none',
				});
				return;
			}
			await sendSmsCode({ mobile: tel.value, scene: 1 });
			uni.navigateTo({
				url: `/pages_login/code?tel=${tel.value}`,
			});
		}
	};
	function isBtn() {
		if (tel.value.length === 11 && isAgree.value) {
			disabled.value = false;
		} else {
			disabled.value = true;
		}
	}
	function getAgree() {
		isAgree.value = !isAgree.value;
		isBtn();
	}
	function toAccountLogin() {
		uni.navigateTo({
			url: '/pages_login/accountLogin',
		});
	}
</script>
<style lang="scss" scoped>
	.login {
		background: #ffffff;

		.tel {
			background: #f8f8f8;
			border-radius: 8px;
		}

		.logo {
			background: #fabb3c;
			border-radius: 50%;
		}

		::v-deep .u-button__text {
			font-size: 36rpx !important;
			font-weight: 600 !important;
		}

		::v-deep .u-button {
			height: 96rpx !important;
		}

		.heng {
			background: #f5f5f5;
		}
	}
</style>